<template>
  <div class="main_container">
    <div class="main_top">
      <div class="banner_container" @wheel="goWheel">
        <!-- 轮播图 -->
        <el-carousel height="150px" class="banner" arrow="always" ref="swiper">
          <el-carousel-item v-for="(item, index) in bannerList" :key="index">
            <router-link :to="'/article/' + item.id">
              <img class="bannerImg" v-lazy="item.imgPath" :key="item.imgPath" />
            </router-link>
          </el-carousel-item>
        </el-carousel>
      </div>

      <div class="web_info">
        <SiteInfo />
      </div>
    </div>
    <div class="article_container">
      <el-image class="tag_img" :src="defaultSetting.hotArticle" />
      <!-- 文章卡片 -->
      <div class="article_body">
        <div class="article_item" v-for="(item, index) in articleList" :key="index" @click="handleArticleInfo(item.id)">
          <el-image class="main_page" :src="item.mainImg" />
          <div class="title">
            {{ item.title }}
          </div>
          <div class="time">
            {{ item.updateTime }}
          </div>
          <div class="use_data">
            <div>
              <svg-icon icon-class="eye" color="b5b5b5" />
              {{ item.readVolume }}
            </div>
            <div>
              <svg-icon icon-class="like" color="b5b5b5" />
              {{ item.likeVolume }}
            </div>
            <div>
              <svg-icon icon-class="comment" color="b5b5b5" />
              {{ item.commentVolume }}
            </div>
            <div>
              <svg-icon icon-class="collect" color="b5b5b5" />
              {{ item.collectVolume }}
            </div>
          </div>
          <div class="line"></div>
          <!-- 发布者信息 -->
          <div class="info">
            <div class="info_left">
              <el-image class="info_avatar" :src="defaultSetting.hotArticle" />
              <span>石添</span>
            </div>
            <div class="info_right">
              <span>前端</span>
            </div>
          </div>
        </div>
      </div>
      <div class="show_all_btn" @click="handleToArticle">查看全部文章</div>
    </div>
    <div class="video_container">
      <el-image class="tag_img" :src="defaultSetting.hotVideo" />
      <!-- 视频 -->
      <div class="video_body">
        <div class="video_item" v-for="(item, index) in videoList" :key="index" @click="handleVideoInfo(item.videoUrl)">
          <el-image class="main_page" :src="item.mainImg" />
          <div class="title">
            {{ item.title }}
          </div>
          <div class="use_data">
            <div>
              <svg-icon icon-class="video" />
              {{ item.readVolume }}人看过
            </div>
            <div>
              <svg-icon icon-class="duration" />
              {{ item.duration }}
            </div>
          </div>
        </div>
      </div>
      <div class="show_all_btn" @click="handleToVideo">查看全部视频</div>
    </div>
  </div>
</template>

<script setup name="Home">
import { listArticle, listVideo, listBanner } from "@/api/home";
import SiteInfo from "@/components/authorInfo/index.vue";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const defaultSetting = ref(proxy.$setting);
const router = useRouter();
const bannerList = ref([]);
const articleList = ref([]);
const videoList = ref([]);
const sayList = ref([]);
const currentIndex = ref(0);
const timer = ref();
const swiper = ref();
const swiperOpen = ref(true);

onBeforeUnmount(() => {
  clearInterval(timer);
});

//获取主页banner
function getBannerList() {
  listBanner('home').then((res) => {
    bannerList.value = res.data;
  });
}

// 查看文章详情

function handleArticleInfo(id) {
  router.push({ path: '/article', query: { articleId: id } })
}
function handleToArticle() {
  router.push({ path: '/ams_list'})
}
function handleToVideo() {
  router.push({ path: '/video_list'})
}
// 查看视频详情
function handleVideoInfo(videoUrl) {
  window.open(videoUrl,'_blank');
}

//获取首页文章
function getArticleList() {
  listArticle().then((res) => {
    articleList.value = res.data;
  })
}

function getVideoList() {
  listVideo().then((res) => {
    videoList.value = res.data;
  })
}

function goWheel() {
  if (swiperOpen.value) {
    if (event.deltaY > 0) {
      //data中定义one为true 当one为true时执行
      swiper.value.next(); //以此来控制每次轮播图切换的张数
    }

    if (event.deltaY < 0) {
      swiper.value.prev();
    }
  }

  swiperOpen.value = false;
  setTimeout(() => {
    swiperOpen.value = true;
  }, 1000);
  event.preventDefault();
}
onMounted(() => {
  getBannerList();
  getArticleList();
  getVideoList();
});
</script>

<style lang="scss" scoped>
.main_container {
  margin: 0 auto;
  padding-top: 80px;
  width: 1200px;

  // 头部banner和个人介绍
  .main_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    height: 460px;

    .banner_container {
      width: 810px;
      height: 460px;
      .bannerImg {
        width: 100%;
        height: 100%;
      }
    }
  }

  .article_container {
    margin-top: 50px;
    width: 100%;

    .article_body {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      flex-wrap: wrap;

      .article_item {
        padding: 15px;
        margin: 0px 20px 30px 0px;
        background: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 10px;
        box-shadow: 0px 0px 10px 0px rgba(168, 168, 168, 0.26);
        cursor: pointer;

        .main_page {
          width: 250px;
          height: 157px;
          background: #bfbfbf;
          border-radius: 10px;
        }

        .title {
          width: 250px;
          margin-top: 12px;
          font-size: 16px;
          font-family: 'Ali_M';
          font-weight: 400;
          text-align: left;
          color: #323333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
        }

        .time {
          margin-top: 11px;
          font-size: 14px;
          font-family: 'Ali_R';
          font-weight: normal;
          text-align: left;
          color: #c7c7c7;
        }

        .use_data {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          font-size: 13px;
          font-family: 'Ali_M';
          font-weight: normal;
          text-align: left;
          color: #c7c7c7;
        }

        .line {
          margin-top: 16px;
          border: 1px solid #eeeeee;
        }

        .info {
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;

          .info_left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            font-size: 13px;
            font-family: 'Ali_R';
            font-weight: 400;
            text-align: left;
            color: #737373;

            .info_avatar {
              width: 28px;
              height: 28px;
              border-radius: 50%;
              margin-right: 8px;
            }
          }

          .info_right {
            font-size: 13px;
            font-family: 'Ali_R';
            font-weight: 400;
            text-align: left;
            color: #737373;
          }
        }

      }
    }

    .article_body> :nth-child(4n) {
      margin-right: 0;
    }
  }

  .video_container {
    width: 100%;

    .video_body {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      flex-wrap: wrap;

      .video_item {
        padding: 15px;
        margin: 0px 20px 30px 0px;
        background: #ffffff;
        border: 1px solid #ffffff;
        border-radius: 10px;
        box-shadow: 0px 0px 10px 0px rgba(168, 168, 168, 0.26);
        cursor: pointer;

        .main_page {
          width: 250px;
          height: 157px;
          background: #bfbfbf;
          border-radius: 10px;
        }

        .title {
          width: 250px;
          margin-top: 12px;
          font-size: 16px;
          font-family: 'Ali_M';
          font-weight: 400;
          text-align: left;
          color: #323333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          word-wrap: break-word;
        }

        .use_data {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-sizing: border-box;
          font-size: 13px;
          font-family: 'Ali_R';
          font-weight: normal;
          text-align: left;
          color: #c7c7c7;
        }
      }
    }

    .video_body> :nth-child(4n) {
      margin-right: 0;
    }
  }


  .main-box {
    width: 100%;
    height: 460px;
    display: flex;
  }

  .hot_category {
    margin-top: 30px;

    ::v-deep(.el-tabs__item:hover span) {
      color: #409eff;
    }
  }
}

.tag_img {
  width: 137px;
  height: 44px;
  margin-bottom: 45px;
}

.show_all_btn {
  margin: 40px auto;
  width: 344px;
  height: 66px;
  font-size: 24px;
  font-family: 'Ali_M';
  text-align: center;
  line-height: 66px;
  color: #ffffff;
  background: #85b13b;
  border-radius: 10px;
  cursor: pointer;
}

.custom-tabs-label {
  display: flex;
  align-items: center;
}

::v-deep(.el-tabs__nav-wrap::after) {
  background-color: var(--background-color);
}

::v-deep(.el-tabs__active-bar) {
  background-color: var(--theme-color);
}

::v-deep(.el-dialog) {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 10px;

  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
      font-size: 16px;
      font-family: 'Ali_R';
    }
  }

  .el-dialog__body {
    background-color: rgb(140, 140, 140);
  }

  .conent {
    text-align: center;
  }

  .footer-item {
    color: #fff;
  }
}

.banner {
  position: relative;
  height: 460px;

  ::v-deep(.el-carousel__container) {
    height: 100% !important;
  }

  .title {
    position: absolute;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 100%;
    bottom: 50px;
    color: #fff;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
  }
}</style>
